import {StyleSheet, TouchableOpacity} from 'react-native';
import {
  SvgRank,
  SvgTDUpdate,
  SvgTheme,
  SvgToPay,
} from '../../../components/svg';
import {dpw10, dpw12, dpw4, dpw66, dpw8} from '../../../constants';
import {ObserverText, ObserverView} from '../../../components';
import {observer} from 'mobx-react-lite';
import {useUserInfoStore} from '../../../mobx';

const list = [
  {
    title: 'ranking',
    icon: <SvgRank />,
    route: 'rank',
  },
  {
    title: 'themeSelection',
    icon: <SvgTheme />,
    route: 'theme-selected',
  },
  {
    title: 'updatedToday',
    icon: <SvgTDUpdate />,
    route: 'today-update',
  },
  {
    title: 'InvitationWithPrize',
    icon: <SvgToPay />,
    route: 'to-pay',
  },
];

const QuickNav = observer((props: any) => {
  const {navigation} = props || {};
  const {userInfo} = useUserInfoStore();

  const toRoute = (info: any) => {
    if (navigation) {
      if (info.route === 'to-pay' && !userInfo?.Token) {
        navigation.navigate('Login');
      } else {
        navigation.navigate(info.route);
      }
    }
  };

  return (
    <ObserverView style={styles.box}>
      {list.map(item => (
        <TouchableOpacity
          key={item.title}
          style={styles.itembox}
          onPress={() => {
            toRoute(item);
          }}>
          {item.icon}
          <ObserverText
            style={{marginTop: dpw10}}
            tKey={item.title}
            size="small"
          />
        </TouchableOpacity>
      ))}
    </ObserverView>
  );
});

export default QuickNav;

const styles = StyleSheet.create({
  box: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
    paddingBottom: dpw12,
  },
  itembox: {
    alignItems: 'center',
    margin: 'auto',
  },
});
